import React, { useEffect, useState, useRef } from 'react'
import { List, Avatar, Image, message, Button, Tooltip, Modal, Tag, Input, Drawer, Table, Space } from 'antd';
import { CloseCircleTwoTone, CheckCircleTwoTone } from '@ant-design/icons';
import axios from 'axios';
import { QuestionCircleTwoTone } from '@ant-design/icons';
import MySpan from '../../../../components/MySpan'
export default function Index() {
  const loginUser = JSON.parse(localStorage.getItem("loginUser"));
  const [listData, setListData] = useState([]);
  const [checkData, setCheckData] = useState([]);
  const [drawerVisible, setDrawerVisible] = useState(false);
  const [drawerVisible2, setDrawerVisible2] = useState(false);
  const [writeModal,setWriteModal] = useState(false)
  const [responderexpressinfo, setResponderexpressinfo] = useState();  //保存 responderexpressinfo信息
  const myExpressId = useRef();
  useEffect(() => {
    axios.get("http://localhost:8080/qryMyRespondent?id=" + loginUser.id).then(resp => {
      setListData(resp.data.data);
      console.log(resp);
    })
    return () => {

    };
  }, []);
  const agreeModal = (record) => {
    Modal.confirm({
      title: '确认',
      content: (
        <div>
          <p>同意本次申请?</p>
        </div>
      ),
      onOk() {
        console.log(record);
        axios.post("http://localhost:8080/agreeMyChangeRespondent", record).then(resp => {
          console.log(resp);
          if (resp.data.state === "0") {
            message.success(resp.data.message, 1);
            setTimeout(() => {
              window.location.reload()
            }, 800);
          } else {
            message.error(resp.data.message, 1);
          }
        }).catch(err => {
          message.error("网络异常!", 1);
        })
      },
    });
  }

  const rejectModal = (record) => {
    Modal.confirm({
      title: '确认',
      content: (
        <div>
          <p>拒绝本次申请?</p>
        </div>
      ),
      onOk() {
        console.log(record);
        axios.post("http://localhost:8080/rejectMyChangeRespondent", record).then(resp => {
          console.log(resp);
          if (resp.data.state === "0") {
            message.success(resp.data.message, 1);
            setTimeout(() => {
              window.location.reload()
            }, 800);
          } else {
            message.error(resp.data.message, 1);
          }
        }).catch(err => {
          message.error("网络异常!", 1);
        })
      },
    });
  }
  const columns = [
    {
      title: <Tooltip title="点击查看物品详细信息">我的物品 <QuestionCircleTwoTone /></Tooltip>,
      key: 'responderrid',
      render: (text, record) => (
         <MySpan title={record.respondentTitle} onClick={() => { drawerOpen(record)}}/>
      ),
    },
    {
      title: <Tooltip title="点击查看物品详细信息">对方物品 <QuestionCircleTwoTone /></Tooltip>,
      key: 'address',
      render: (text, record) => (
        <MySpan title={record.applyTitle} onClick={() => { drawerOpen2(record) }}/>
      ),
    },
    {
      title: '状态',
      key: 'changetype',
      width:'8%',
      filters: [
        {
          text: '待同意',
          value: 0,
        },
        {
          text: '已同意',
          value: 1,
        },
        {
            text: '已拒绝',
            value: 2,
          }
    ],
      render: (text, record) => (
        <Space size="middle" key="changetype">
          {
            record.changetype == 0 ?
              <Tag color="lime">等待您同意</Tag> :
              record.changetype == 1 ?
                <Tag color="green">已同意</Tag> :
                <Tag color="#f50">已拒绝</Tag>
          }
        </Space>
      ),
      onFilter: (value, record) => record.changetype === value,
    },
  
    {
      title: '对方快递信息',
      key: 'expressinfo',
      render: (text, record) => (
        <Space size="middle" key="useraction">
          {
            record.changetype == "1" ?
              <>
                <Tag color="blue">{record.applyerexpressid!=null||record.applyerexpressid!=''?record.applyerexpressid: "TA还未填写快递单号"}</Tag>
              </>  :<></>
          }
        </Space >
      ),
    },
    {
      title: '我的快递信息',
      key: 'expressinfo',
      render: (text, record) => (
        <Space size="middle" key="useraction">
          {
            record.changetype == "1" ?
              <>
                
                <Tag color="blue">{record.responderexpressid==null||record.responderexpressid==""?"请填写快递单号":record.responderexpressid}</Tag>
                <Button onClick={() => { showWriteModal(record) }}>填写/修改</Button>
              </> :<></>
          }
        </Space >
      ),
    },
    {
      title: 'Action',
      key: 'action',
      render: (text, record) => (
        <Space size="middle" key="useraction">
          {
            record.changetype == "0" ?
              <>
                <a onClick={() => { agreeModal(record) }}><CheckCircleTwoTone twoToneColor="#00ff00" /></a>
                <a onClick={() => { rejectModal(record) }}><CloseCircleTwoTone twoToneColor="#eb2f96" /></a>
              </> :
              
              <></>
          }
        </Space >
      ),
    },
    
  ];
  const drawerOpen = (record) => {
    axios.get("http://localhost:8080/getChaneInfoById?id=" + record.respondentchangeinfoid).then(resp => {
      console.log("GETCHANGEINFOBYID:", resp.data);
      setCheckData([resp.data.data]);
      setDrawerVisible(true)
    })
  }
  const drawerOpen2 = (record) => {
    axios.get("http://localhost:8080/getChaneInfoById?id=" + record.applychangeinfoid).then(resp => {
      console.log("GETCHANGEINFOBYID:", resp.data);
      setCheckData([resp.data.data]);
      setDrawerVisible2(true)
    })
  }
  const showWriteModal = (record) => {
    setWriteModal(true)
    setResponderexpressinfo(record)
  }
  const writeModalOK = () => {
    //填写我的物流单号
    let rs = responderexpressinfo;
    rs.responderexpressid = myExpressId.current.state.value
    setResponderexpressinfo(rs)
    console.log(responderexpressinfo); //
    axios.post("http://localhost:8080/saveresponderexpressid", responderexpressinfo).then(resp => {
      console.log(resp);
      if (resp.data.state === "0") {
        message.success(resp.data.message, 1)
        setWriteModal(false);
        setTimeout(() => {
          window.location.reload()
        }, 800);
      } else {
        message.error(resp.data.message, 1)
        setWriteModal(false);
        setTimeout(() => {
          window.location.reload()
        }, 800);
      }
    }).catch(err => {
      message.error("网络异常!", 1);
      setWriteModal(false);
      setTimeout(() => {
        window.location.reload()
      }, 800);
    })


    
  }
  return (
    <div sylte={{ displayl: 'flex' }} className="animate__animated animate__fadeIn">
      <Table dataSource={listData} columns={columns} />

      <Drawer
        title="我的物品"
        placement='bottom'
        width={500}
        onClose={() => { setDrawerVisible(false) }}
        visible={drawerVisible}
      >
        <List
          itemLayout="vertical"
          size="large"
          dataSource={checkData}
          key="changeinfo1"
          renderItem={item => (
            <List.Item
              key={item.id}
              extra={
                <Space direction="vertical" key="changeinfophoto1">
                  <Image
                    width={135}
                    src={`http://localhost:8080/getChangeInfoPhoto?id=${item.id}`}
                  />
                </Space>
              }
            >
              <List.Item.Meta
                avatar={<Avatar src={`http://localhost:8080/getUserHead?id=${item.createrid}`} />}
                title={loginUser.nickname}
                description={`标题:${item.title}`}
                key="userhead"
              />
              {item.message}
            </List.Item>
          )}

        />
      </Drawer>

      <Drawer
        title="TA的物品"
        placement='bottom'
        width={500}
        onClose={() => { setDrawerVisible2(false) }}
        visible={drawerVisible2}
      >
        <List
          itemLayout="vertical"
          size="large"
          dataSource={checkData}
          key="changeinfo2"
          renderItem={item => (
            <List.Item
              key={item.id}
              extra={
                <Space direction="vertical" key="changeinfophoto2">
                  <Image
                    width={135}
                    src={`http://localhost:8080/getChangeInfoPhoto?id=${item.id}`}
                  />
                </Space>
              }
            >
              <List.Item.Meta
                avatar={<Avatar src={`http://localhost:8080/getUserHead?id=${item.createrid}`} />}
                title={`${item.nickname}(${item.city})`}
                description={`标题:${item.title}`}
                key="userhead2"
              />
              {item.message}
              <p>详细地址:{item.address}</p>
            </List.Item>
          )}

        />
      </Drawer>
      <Modal
       title="填写物流单号"
       visible={writeModal}
       onCancel={() => {setWriteModal(false)}}
       onOk={writeModalOK}
      >
        <Input ref={myExpressId}/>
      </Modal>
    </div>
  )
}
